<template>
  <div class="student-job-detail">
    <div class="job-detail-header">
      <div class="times">
        更新于 2020/5/19 ～ 截止于 2020/6/16
      </div>
      <div class="name_company">
        <span class="jobName">{{ jobData.jobName }}</span>
        <span class="companyName">({{ jobData.companyName }})</span>
      </div>
      <div class="salaryName">{{ jobData.salaryName }}</div>
      <div class="job-infos">
        <span class="job-info"
          >{{ jobData.province }}-{{ jobData.city }}-{{ jobData.county }}</span
        >
        <span class="job-info">{{ jobData.workExperienceName }}</span>
        <span class="job-info">{{ jobData.minEduName }}</span>
        <span class="job-info">招{{ jobData.recruiterNum }}人</span>
      </div>
      <div class="job-tags">
        <span class="job-tag">{{ jobData.jobTags }}</span>
        <!-- <span class="job-tag" v-for="item in jobData.jobTags" :key="item">{{
          item
        }}</span> -->
      </div>
      <el-button class="post-btn" type="primary" @click="postJob"
        >投递简历</el-button
      >
    </div>
    <div class="job-detail-body">
      <div class="info-group">
        <div class="info-group-title">职位介绍</div>
        <div class="info-group-content">
          {{ jobData.intro }}
        </div>
      </div>
    </div>
    <Dialog
      title="投递简历"
      icon="shenqingguanli"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    >
      <div class="job-post-success">
        <SvgIcon name="chenggong" />
        投递成功
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Dialog } from 'components'
import { getJobDetail, postJob } from 'services/student/job'
export default {
  name: 'StudentJobDetail',
  components: { Dialog },
  data() {
    return {
      jobId: null,
      jobData: {},
      dialogVisible: false
    }
  },
  methods: {
    async getJobDetail() {
      this.jobData = await getJobDetail({ id: this.jobId })
    },
    async postJob() {
      await postJob({ jobId: this.jobId })
      this.dialogVisible = true
    }
  },
  created() {
    this.jobId = this.$route.query.id
    this.getJobDetail()
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.student-job-detail {
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(92, 124, 250, 0.1);
  border-radius: 6px;
  overflow: hidden;
  .job-detail-header {
    padding: 32px 67px;
    background: #f8f9fb;
    position: relative;
    .times {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
    .name_company {
      margin-top: 52px;
      color: $colorText1;
      .jobName {
        font-size: 28px;
      }
      .companyName {
        margin-left: 15px;
      }
    }
    .salaryName {
      margin-top: 32px;
      font-size: 24px;
      color: $colorDanger;
    }
    .job-infos {
      margin-top: 16px;
      color: $colorText2;
      .job-info:not(:last-child)::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background-color: $colorText1;
        margin-left: 5px;
        margin-right: 5px;
        position: relative;
        top: -4px;
      }
    }
    .job-tags {
      margin-top: 16px;
      .job-tag {
        margin-right: 10px;
        display: inline-flex;
        align-items: center;
        padding: 0 20px;
        height: 24px;
        border: 1px solid $colorPrimary;
        border-radius: 12px;
        color: $colorPrimary;
      }
    }
    .post-btn {
      width: 180px;
      position: absolute;
      bottom: 59px;
      right: 117px;
    }
  }
  .job-detail-body {
    padding: 15px 67px 35px;
  }
  .job-post-success {
    padding: 0.5rem 0;
    text-align: center;
    color: $colorText1;
    font-size: 30px;
    .svg-icon {
      color: $colorSuccess;
      margin-right: 0.27rem;
    }
  }
}
</style>
